<template>
  <!-- https://blog.csdn.net/ww_5211314/article/details/121820519 -->
  <!-- 这里有两种情况的，一种是采用vant的popup组件 -->
  <!-- <van-popup
      v-model="isShowPublicTest"
      position="bottom"
      closeable
      class="standard-popup"
      @close="closePublicTest"
    >
      <div>测试model</div>
    </van-popup> -->
  <!-- 这一种自己定义弹窗 -->
  <div class="main-test" v-if="isShowPublicTest" @click="closePublicTest">
    <div class="test-content"></div>
  </div>
</template>
<script>
export default {
  model: {
    prop: "isShowPublicTest",
    event: "input1",
  },
  props: {
    isShowPublicTest: {
      type: Boolean,
      default: false,
    },
    // value: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data () {
    return {};
  },
  methods: {
    // 这个事件就是再关闭弹窗时---触发的change事件。。这是必须的，否则这个v-model不成立（参考v-model的实现原理就可以理解）
    closePublicTest () {
      //   这里就是弹窗关闭时实时通知model，也就是监听事件
      this.$emit('input1', false);
    }
  },
};
</script>

<style lang="scss" scoped>
.main-test {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0px;
  left: 0px;

  .test-content {
    width: 100%;
    height: 50%;
    border: 1px solid red;
    position: absolute;
    bottom: 0px;
    background: #fff;
  }
}
</style>
